<template>
  <div class="user_info">
    <nav-bar></nav-bar>
    <img src="@/assets/bannerTop_new.png" class="back_img" alt="">
    <user-detail :userinfo="model"></user-detail>
    <user-article></user-article>
  </div>
</template>

<script>
import NavBar from '../components/common/NavBar.vue'
import UserDetail from '../components/usercomponent/UserDetail.vue'
import UserArticle from '../components/usercomponent/UserArticle.vue'
export default {
  data () {
    return {
      model: {}
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      // 发送获取用户信息请求 /user/:id 另外,请求头中需携带token
      /* 第二个参数 统一封装到axios请求拦截器中
      {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        }
      }
      */
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('获取用户信息失败')
      this.model = res.data[0]
    }
  },
  components: {
    NavBar,
    UserDetail,
    UserArticle
  }
}
</script>

<style lang="less" scoped>
.user_info {
  .back_img {
    height: 90px;
    width: 100%;
  }
}
</style>
